<!DOCTYPE html>
<html lang="zh" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <title>文件上传</title>

    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
    <link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
    <link rel="stylesheet" th:href="@{/js/zyupload/skins/zyupload-1.0.0.min.css}" type="text/css"/>
</head>
<body>
<div class="center-block panel panel-info " >
    <div class="panel-body">
		<center>
        <div class="row clearfix">
            <div class="col-md-4 col-sm-4 col-xs-4">
               <button type="button" class="btn btn-info" onclick="open_dialog()">医保文件上传</button>&nbsp;&nbsp;

                <button type="button" class="btn btn-info" onclick="open_dialog()">心理文件上传</button>&nbsp;&nbsp;
            </div>
        </div>
		</center>
    </div>
</div>
<!--&lt;!&ndash; 上传附件模态框 &ndash;&gt;-->
<div class="modal fade bs-example-modal-sm" id="identifier" tabindex="-1" role="dialog"
     aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"
                        aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
                <h4 class="modal-title">添加附件
                    <font size="2.5" color="blue">&nbsp;&nbsp;附件仅支持xls,xlsx类型的表格</font>
                </h4>
            </div>
            <div class="modal-body">
                <div id="zyupload1" class="zyupload">
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-success" data-dismiss="modal">确定</button>
            </div>
        </div>
    </div>
</div>
<!--<footer th:replace="menu/footer :: footer"></footer>-->
</body>

<script src="https://cdn.bootcss.com/jquery/2.2.2/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript" th:src="@{/js/zyupload/zyupload-1.0.0.min.js}"></script>
<script th:src="@{/js/bootstrap-paginator.min.js}" type="text/javascript"></script>

<script th:inline="javascript">
    function open_dialog() {
        $("#zyupload1").html("");
        $("#zyupload1").zyUpload({
            width: "550px",           // 宽度
            height: "160px",           // 宽度
            itemWidth: "80px",            // 文件项的宽度
            itemHeight: "65px",            // 文件项的高度
            url: [[@{/file/uploadFile}]], // 上传文件的路径
			fileType : ["jpg","png","docx","xls","doc","xlsx"], // 上传文件的类型
            fileSize: 51200000,          // 上传文件的大小
            multiple: false,            // 是否可以多个文件上传
            dragDrop: false,            // 是否可以拖动上传文件
            tailor: false,            // 是否可以裁剪图片
            del: true,             // 是否可以删除文件
			finishDel: false,            // 是否在上传文件完成后删除预览
            /* 外部获得的回调接口 */
            onSelect: function (selectFiles, allFiles) { // 选择文件的回调方法  selectFile:当前选中的文件  allFiles:还没上传的全部文件
			},
			onDelete : function (file, files) { // 删除一个文件的回调方法 file:当前删除的文件  files:删除之后的文件
			},
			onSuccess : function (file, response) {
				if (response == "error") {
					alert("上传文件出错，请重试！");
					window.location.reload();
				} else {
                    $("#zyupload1").attr("class", "alert alert-info");
                    $("#zyupload1").html("上传文件成功");
				}
			},
			onFailure : function (file, response) { // 文件上传失败的回调方法
                $("#zyupload1").attr("class", "alert alert-danger");
                $("#zyupload1").html("未知异常，请刷新重试！");
			},
			onComplete : function (response) { // 上传完成的回调方法
			}
		});
        $('#identifier').modal('show');
    }
</script>
</html>